<template>
  <div class="pash-domain-table">
    <Table
      :loading="loading"
      ref="pushDomianTable"
      :columns="columns"
      :data="list"
      :disabled-hover="true"
      stripe
      @on-select="onSelectEvent"
      @on-select-cancel="onSelectCancelEvent"
      @on-select-all="onSelectAllEvent"
      @on-select-all-cancel="onSelectAllCancelEvent"
    ></Table>
    <div class="form-page-bottom-area flx-row-c-c">
      <Page
        :total="pageData.total"
        :current="pageData.page"
        :page-size="pageData.limit"
        :page-size-opts="pageData.pageSizeOpts"
        show-elevator
        show-sizer
        show-total
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>
<script>
import { uniq, remove, union, xor } from "lodash";
export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    pageData: {
      type: Object,
      default: () => {
        return {
          total: 0,
          page: 1,
          limit: 10,
          pageSizeOpts: [10, 15, 20],
        };
      },
    },
  },
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "序号",
          type: "index",
          width: 100,
          align: "center",
        },
        {
          title: "域名",
          key: "domainName",
          align: "center",
        },
        {
          title: "注册商",
          key: "isOutside",
          align: "center",
          render: (h, params) => {
            return h("span", params.row.isOutside === 0 ? "190" : "外部");
          },
        },
      ],
    };
  },
  watch: {
    list: {
      handler(val) {
        this.$nextTick(() => {
          const pushSelectDomian = this.$storage.getPushSelectDomian();
          if (pushSelectDomian) {
            // 遍历如果有选中的数据设置选中
            for (let index = 0; index < val.length; index++) {
              const item = val[index];
              for (let index2 = 0; index2 < pushSelectDomian.length; index2++) {
                const item2 = pushSelectDomian[index2];
                let doName = item2;
                // 一口价选择域名
                item2.split("|").length >= 2 && (doName = item2.split("|")[0]);
                if (item.domainName === doName) {
                  this.$refs.pushDomianTable.$refs.tbody.objData[
                    index
                  ]._isChecked = true; // 设置已勾选项为空或者勾选true
                }
              }
            }
          }
        });
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    },
    pageChange(val) {
      this.$emit("pageChange", val);
    },
    pageSizeChange(val) {
      this.$emit("pageSizeChange", val);
    },
    // checkbox单个选中数据
    onSelectEvent(selection, row) {
      const array = this.$storage.getPushSelectDomian();
      array.push(row.domainName);
      this.$storage.setPushSelectDomian(uniq(array));
    },
    // checkbox单个取消数据
    onSelectCancelEvent(selection, row) {
      const array = this.$storage.getPushSelectDomian();
      remove(array, (o) => {
        return o === row.domainName;
      });
      this.$storage.setPushSelectDomian(array);
    },
    // checkbox全选的数据
    onSelectAllEvent(selection) {
      const array = this.$storage.getPushSelectDomian();
      const tempArray = selection.map((o) => {
        return o.domainName;
      });
      const newArray = union(array, tempArray);
      this.$storage.setPushSelectDomian(newArray);
    },
    // checkbox取消全选的数据
    onSelectAllCancelEvent() {
      const array = this.$storage.getPushSelectDomian();
      // 排除禁止选择的数据
      const tempList = this.list.filter((o) => {
        return o.isOutside === 0;
      });
      const tempArray = tempList.map((o) => {
        return o.domainName;
      });
      const newArray = xor(array, tempArray);
      this.$storage.setPushSelectDomian(newArray);
    },
  },
};
</script>
<style lang="scss" scoped>
.pash-domain-table /deep/ {
  .form-page-bottom-area {
    border: none;
  }
  .ivu-table-wrapper {
    .ivu-table-header {
      color: #000;
    }
    .ivu-table-row {
      &:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);

        transform: scale(1.01);
      }
    }
  }
}
</style>
